<!-- Main content -->
        <section class="content container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">操作历史</h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body table-responsive no-padding">
                            <div class="box-body pull-left">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label class="sr-only" for="startDate">开始日期</label>
                                        <input type="date" name="start" class="form-control" id="startDate"
                                               placeholder="开始日期">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="endDate">结束日期</label>
                                        <input type="date" name="end" class="form-control" id="endDate"
                                               placeholder="结束日期">
                                    </div>
                                    <div class="form-group">
                                        <label class="sr-only" for="opType">操作类型</label>
                                        <select name="type" class="form-control" id="opType">
                                            <option value="">全部</option>
                                            <option value="1">入库</option>
                                            <option value="-1">出库</option>
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-default" onclick="table.ajax.reload();">查询</button>
                                </form>
                            </div>
                            <div class="box-body pull-right">
                                <button type="button" class="btn btn-success" data-toggle="modal"
                                        data-target="#modal-default">
                                    新增
                                </button>
                            </div>
                            <div class="modal fade" id="modal-default">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">添加一个商品</h4>
                                        </div>
                                        <div class="modal-body">
                                            <!-- form start -->
                                            <form role="form" id="goodsAddForm">
                                                <div class="box-body">
                                                    <div class="form-group">
                                                        <label for="goodsName">商品名称</label>
                                                        <input type="text" class="form-control" name="name"
                                                               id="goodsName" placeholder="商品名称">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="goodsPosition">货架位</label>
                                                        <input type="text" class="form-control" name="position"
                                                               id="goodsPosition" placeholder="货位">
                                                    </div>
                                                </div>
                                                <!-- /.box-body -->
                                            </form>
                                            <!-- /.box -->
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default pull-left"
                                                    data-dismiss="modal">取消
                                            </button>
                                            <button type="button" class="btn btn-primary" id="goodsSaveBtn"
                                                    data-dismiss="modal" onclick="saveGoods()">保存
                                            </button>
                                        </div>
                                    </div>
                                    <!-- /.modal-content -->
                                </div>
                                <!-- /.modal-dialog -->
                            </div>
                            <!-- /.modal -->
                            <table id="historyTable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>商品</th>
                                    <th>操作</th>
                                    <th>操作时间</th>
                                </tr>
                                </thead>
                            </table>

                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
            </div>
        </section>
        <!-- /.content -->
                <script>
                    var table;
                    function initPage() {
                        table = $('#historyTable').DataTable({
                            'dom': 'rtlp',
                            'serverSide': true,
                            'ajax': {
                                url: '${base}/historyData',
                                data: function (d) {
                                    d.startDate=$('#startDate').val();
                                    d.endDate=$('#endDate').val();
                                    d.type=$('#opType').val();
                                }
                            },
                            'columns': [
                                {"data": "id"},
                                {"data": "goods.name"},
                                {
                                    "data": "operateType",
                                    "render": function (data) {
                                        //类型：0导航菜单；1操作按钮。
                                        switch (data) {
                                            case 2:
                                                return "出库";
                                            case 1:
                                                return "入库 ";
                                        }
                                    }
                                },
                                {
                                    "data": "opDate"
                                }
                            ]
                        });
                    }
                </script>